<template>
  <div class="node-manage">
    <div class="ivrAnnouncementNodeLink-wrap">
      <div class="search">
        <search ref="search" :inputTitle="'请输入节点名称进行查询'" :currentPage="currentPage" :count="count" @exportMethod="exportAct" @inputChange="inputChangeAct" @turnPage="turnPageAct" :disabledReload="disabledReload"></search>
      </div>
      <diyTable :tableHeader="tableHeader" :tableData="tableList" @exportAct="tableOpera"></diyTable>
    </div>
    <left-slide :visible.sync="isShowLeft" @close="close" :title="title">
      <node-deal :form="formData" @cancelClick="close" @saveClick="saveNode"></node-deal>
    </left-slide>
  </div>
</template>
<script>
  import {filterAct, handleFakePage} from '@/utils/m7Utils'
  import diyTable from '@/components/ui-modules/diytable/index.vue'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import search from '../base/search.vue'
  import nodeDeal from './ivrNodeEditContent/ivrSuperDialJobNumNodeLinkDeal.vue'
  export default {
    name: 'IvrDialJobNodeLink',
    data () {
      return {
        oldPBX: '', // 暂存pbx 用于pbx变化时对比 判断是否重新刷新
        Account: '', // 账户id
        title: '采集工号并拨打节点',
        isShowLeft: false, // 弹窗控制值
        disabledReload: true, // 生效按钮是否可用
        formData: { // 双向回呼节点值
          _id: '',
          DisplayName: '',
          Exten: '',
          Filename: '',
          ToPeerTypeWhenFrontOffice: '', // 按0前台转向
          ToPeerWhenFrontOffice: '',
          ToPeerTypeWhenEmpnoNotExist: '', // 工号不存在转向
          ToPeerWhenEmpnoNotExist: '',
          ToPeerTypeWhenEmpnoAgentBusy: '', // 座席忙转向
          ToPeerWhenEmpnoAgentBusy: '',
          ToPeerTypeWhenEmpnoLogoff: '', // 网关未注册也未绑定手机转向
          ToPeerWhenEmpnoLogoff: ''
        },
        tableHeader: [
          {prop: 'DisplayName', label: '节点'},
          {prop: 'Exten', label: '节点ID'},
          {prop: 'UpdateTime', label: '最后更新时间'},
          {prop: 'operaSet', label: '操作', width: 150, opera: [{actMethod: 'update', actName: '修改'}, {actMethod: 'del', actName: '删除'}]}
        ], //   自定义 表头
        currentPage: 1,
        count: 0,
        tableList: [],   //  用于表格渲染数据
        totalList: [],   //  所有返回的列表数据   需要假分页在处理一下
        handledList: []   //  被模糊搜索过的list数据
      }
    },
    computed: {
      curPbx () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    components: {
      search,
      diyTable,
      leftSlide,
      nodeDeal
    },
    watch: {
    },
    methods: {
      // 子组件外抛成功事件
      saveNode () {
        this.initTable() // 刷新列表
        this.isShowLeft = false // 隐藏弹窗
        this.disabledReload = false   //  生效按钮可以点击了
      },
      // 关闭弹窗
      close () {
        this.isShowLeft = false
      },
      // 添加刷新生效方法接收
      exportAct (val) {
        this[val]()
      },
      // 初始化弹窗数据
      add () {
        this.formData = {
          _id: '',
          DisplayName: '',
          Exten: '',
          Filename: '',
          ToPeerTypeWhenFrontOffice: '', // 按0前台转向
          ToPeerWhenFrontOffice: '',
          ToPeerTypeWhenEmpnoNotExist: '', // 工号不存在转向
          ToPeerWhenEmpnoNotExist: '',
          ToPeerTypeWhenEmpnoAgentBusy: '', // 座席忙转向
          ToPeerWhenEmpnoAgentBusy: '',
          ToPeerTypeWhenEmpnoLogoff: '', // 网关未注册也未绑定手机转向
          ToPeerWhenEmpnoLogoff: ''
        }
        this.title = '添加采集工号并拨打节点'
        this.isShowLeft = true
      },
      refresh () {
        this.initTable()
      },
      // 刷新
      active () {
        let obj = {
          PBX: this.curPbx,
          Account: this.Account
        }
        this.$store.dispatch('reloadIvr', obj).then(res => {
          if (res.success) {
            this.disabledReload = true
            this.$message({
              type: 'success',
              message: this.$t('configLazyLoad.process.effectiveSuccessfully')
            })
          }
        })
      },
      //  搜索列表
      inputChangeAct (val) {
        this.handledList = filterAct(val, 'DisplayName', this.totalList)
        this.count = this.handledList.length || 0
        this.currentPage = 1
        this.tableList = handleFakePage(this.currentPage, this.handledList)
      },
      // 翻页
      turnPageAct (val1) {
        this.currentPage = val1
        this.tableList = handleFakePage(this.currentPage, this.handledList)
      },
      // 表格操作栏事件
      tableOpera (obj) {
        let data = obj.data
        if (obj.actMethod === 'update') {
          this.title = '修改采集工号并拨打节点'
          this.formData = data
          this.isShowLeft = true
        } else if (obj.actMethod === 'del') {
          this.delAct(obj.data)
        }
      },
      // 删除
      delAct (val) {
        this.$confirm('此采集工号并拨打节点将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteSuperDialJobNum', val).then(res => {
            this.initTable()
            this.disabledReload = false // 生效按钮可以点击了
            this.$message({
              type: 'success',
              message: this.$t('config.channel.deleteSuccess')
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      // 渲染表格
      initTable () {
        this.Account = this.$store.state.session.user.account
        this.$store.dispatch('querySuperDialJobNum', {Account: this.Account, PBX: this.curPbx}).then((res) => {
          this.totalList = res.list
          this.handledList = res.list
          this.count = this.handledList.length || 0
          this.tableList = handleFakePage(1, this.handledList)
          this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.curPbx, typeName: 'ivr_node_superDialJobNum', data: res.list || [], flag: 'data', node: this})
        })
      }
    },
    deactivated () {
      this.oldPBX = this.curPbx
    },
    activated () {
      if (this.oldPBX !== this.curPbx) {
        this.$refs.search.exportMethod('refresh')
      }
    },
    beforeMount () {
      this.initTable()
      this.oldPBX = this.$store.state.config.callCenter.currentPBX
    }
  }
</script>

<style lang="stylus" scoped>
  .search
    border 1px solid #E7E7EB
    border-bottom none
</style>
